<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>溅射速率计算器</title>
    <!-- DNS 预解析和预连接，加速资源加载 -->
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    <!-- Element UI CSS - 使用 jsDelivr CDN 加速 -->
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/theme-chalk/index.css" as="style">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px 15px;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            padding: 20px;
        }
        
        .title {
            text-align: center;
            color: #333;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .form-section {
            margin-bottom: 25px;
        }
        
        .section-label {
            font-size: 16px;
            font-weight: 500;
            color: #606266;
            margin-bottom: 12px;
            display: block;
        }
        
        .hint-text {
            font-size: 12px;
            color: #909399;
            margin-top: 8px;
            padding: 8px 12px;
            background: #f5f7fa;
            border-radius: 4px;
            line-height: 1.5;
        }
        
        .result-section {
            margin-top: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            color: white;
        }
        
        .result-label {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 8px;
        }
        
        .result-value {
            font-size: 28px;
            font-weight: 600;
            word-break: break-all;
        }
        
        .result-formula {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .depth-input-section {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .depth-label {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 12px;
            color: white;
        }
        
        .result-section .el-input-number {
            width: 100%;
        }
        
        .result-section .el-input-number .el-input__inner {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
        }
        
        .result-section .el-input-number .el-input__inner::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
        
        .result-section .el-input-number:hover .el-input__inner {
            border-color: rgba(255, 255, 255, 0.5);
        }
        
        .result-section .el-input-number.is-focus .el-input__inner {
            border-color: rgba(255, 255, 255, 0.7);
        }
        
        .result-section .el-input-number .el-input-number__increase,
        .result-section .el-input-number .el-input-number__decrease {
            background: rgba(255, 255, 255, 0.1);
            border-left: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
        }
        
        .result-section .el-input-number .el-input-number__increase:hover,
        .result-section .el-input-number .el-input-number__decrease:hover {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }
        
        /* 移动端优化 */
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            
            .container {
                padding: 15px;
                border-radius: 12px;
            }
            
            .title {
                font-size: 20px;
                margin-bottom: 20px;
            }
            
            .result-value {
                font-size: 24px;
            }
        }
        
        /* Element UI 组件样式覆盖 */
        .el-select {
            width: 100%;
        }
        
        .el-input-number {
            width: 100%;
        }
        
        .el-input-number .el-input__inner {
            text-align: left;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1 class="title">溅射速率计算器</h1>
            
            <!-- 参考速率选择 -->
            <div class="form-section">
                <label class="section-label">参考速率</label>
                <el-select 
                    v-model="selectedElement" 
                    placeholder="请选择元素"
                    @change="onElementChange">
                    <el-option
                        v-for="item in elements"
                        :key="item.element"
                        :label="item.element"
                        :value="item.element">
                        <span style="float: left">{{ item.element }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rate }} nm.s⁻¹</span>
                    </el-option>
                </el-select>
                <div v-if="selectedElement && selectedRate" class="hint-text">
                    Sputter rate at 1μA 3kV Ar 1x1mm = {{ selectedRate }} nm.s⁻¹
                </div>
            </div>
            
            <!-- 离子能量输入 -->
            <div class="form-section">
                <label class="section-label">离子能量 (keV)</label>
                <el-input-number
                    v-model="ionEnergy"
                    :min="0"
                    :precision="0"
                    :step="1"
                    :controls="true"
                    placeholder="请输入离子能量"
                    style="width: 100%;">
                </el-input-number>
            </div>
            
            <!-- 边长输入 -->
            <div class="form-section">
                <label class="section-label">刻蚀面积 (mm)</label>
                <el-input-number
                    v-model="sideLength"
                    :min="0"
                    :precision="0"
                    :step="1"
                    :controls="true"
                    placeholder="请输入边长"
                    style="width: 100%;">
                </el-input-number>
            </div>
            
            <!-- 电流输入 -->
            <div class="form-section">
                <label class="section-label">电流 (nA)</label>
                <el-input-number
                    v-model="current"
                    :min="0"
                    :precision="0"
                    :step="1000"
                    :controls="true"
                    placeholder="请输入电流"
                    style="width: 100%;">
                </el-input-number>
            </div>
            
            <!-- 计算结果 -->
            <div class="result-section">
                <div class="result-label">溅射速率</div>
                <div class="result-value">{{ calculatedResult }}</div>
                <div class="result-formula">
                    计算公式: (参考速率 × 电流/1000 × √(离子能量/3)) / 边长²
                </div>
                
                <!-- Depth 输入 -->
                <div class="depth-input-section">
                    <div class="depth-label">Depth (nm)</div>
                    <el-input-number
                        v-model="depth"
                        :min="0"
                        :precision="2"
                        :step="0.1"
                        :controls="true"
                        placeholder="请输入深度"
                        style="width: 100%;">
                    </el-input-number>
                </div>
                
                <div v-if="timeResult" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.3);">
                    <div class="result-label">所需时间</div>
                    <div class="result-value">{{ timeResult }}</div>
                    <div class="result-formula">
                        计算公式: Depth / 溅射速率
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Vue.js 生产版本 - 使用 jsDelivr CDN 加速，体积更小性能更好 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <!-- Element UI JS - 使用 jsDelivr CDN 加速 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    selectedElement: '',
                    ionEnergy: 3,
                    sideLength: 1,
                    current: 1000,
                    depth: 0,
                    elements: [
                        { element: 'Al', rate: 0.28 },
                        { element: 'Co', rate: 0.21 },
                        { element: 'Cu', rate: 0.18 },
                        { element: 'In', rate: 0.478 },
                        { element: 'Fe', rate: 0.21 },
                        { element: 'Pb', rate: 0.57 },
                        { element: 'Mg', rate: 0.7 },
                        { element: 'Mo', rate: 0.15 },
                        { element: 'Ni', rate: 0.215 },
                        { element: 'Pt', rate: 0.16 },
                        { element: 'Rh', rate: 0.17 },
                        { element: 'Si', rate: 0.22 },
                        { element: 'Ta', rate: 0.127 },
                        { element: 'Ti', rate: 0.22 },
                        { element: 'W', rate: 0.11 },
                        { element: 'Zn', rate: 0.775 },
                        { element: 'Zr', rate: 0.815 }
                    ]
                }
            },
            computed: {
                selectedRate() {
                    if (!this.selectedElement) return null;
                    const element = this.elements.find(e => e.element === this.selectedElement);
                    return element ? element.rate : null;
                },
                calculatedResultValue() {
                    // 计算公式: (参考速率 * 电流/1000 * (离子能量/3)的开方) / 边长的平方
                    // 返回数值用于后续计算
                    if (!this.selectedRate || !this.ionEnergy || !this.sideLength || !this.current) {
                        return null;
                    }
                    
                    if (this.sideLength === 0) {
                        return null;
                    }
                    
                    const rate = this.selectedRate;
                    const currentInmA = this.current / 1000; // 转换为mA
                    const sqrtEnergyRatio = Math.sqrt(this.ionEnergy / 3);
                    const sideLengthSquared = Math.pow(this.sideLength, 2);
                    
                    const result = (rate * currentInmA * sqrtEnergyRatio) / sideLengthSquared;
                    
                    return result;
                },
                calculatedResult() {
                    // 返回格式化的字符串用于显示
                    if (!this.calculatedResultValue) {
                        if (!this.selectedRate || !this.ionEnergy || !this.sideLength || !this.current) {
                            return '请完成所有输入';
                        }
                        if (this.sideLength === 0) {
                            return '边长不能为0';
                        }
                        return '请完成所有输入';
                    }
                    
                    return this.calculatedResultValue.toFixed(6) + ' nm.s⁻¹';
                },
                timeResult() {
                    // 计算公式: depth / 计算结果
                    if (!this.depth || !this.calculatedResultValue) {
                        return null;
                    }
                    
                    if (this.calculatedResultValue === 0) {
                        return '速率不能为0';
                    }
                    
                    const time = this.depth / this.calculatedResultValue;
                    
                    // 始终以秒为单位显示
                    return time.toFixed(6) + ' s';
                }
            },
            methods: {
                onElementChange() {
                    // 元素改变时的处理
                }
            }
        });
    </script>
</body>
</html>
